<template>  
    <view class="custom-modal" v-if="visible">  
       <view class="content">  
         <slot></slot>  
       </view>  
     </view>  
 </template>  
     
 <script>  
   export default {  
     props: {  
       visible: {  
         type: Boolean,  
         default: false  
       },
     }  
   };  
  </script>  
 
  <style scoped>  
   .custom-modal {  
     position: fixed;  
     top: 0;  
     left: 0;  
     width: 100%;  
     height: 100%;  
     background-color: rgba(0, 0, 0, 0.5);  
     display: flex;  
     justify-content: center;  
     align-items: center;  
   }  
     
   .custom-modal .content {  
     width: 80%;  
	 margin: 0 atuo;
     background-color: #fff;  
     padding: 20px;  
     border-radius: 10px;  
   }  
  </style>  
